<template>
  <div class="camera-control-overlay">
    <div class="button-group">
      <!-- 截屏按钮 -->
      <el-button 
        type="primary" 
        :icon="Camera"
        @click="captureImage"
        :loading="capturing"
        class="control-button"
      >
        截屏
      </el-button>

      <!-- 查看截屏按钮 -->
      <el-button 
        type="success" 
        :icon="Picture"
        @click="showLatestImage"
        class="control-button"
      >
        查看截屏
      </el-button>
    </div>
  </div>

  <!-- 将对话框移到外部 -->
  <el-dialog
    v-model="dialogVisible"
    title="最新截屏"
    width="55%"
    :modal="true"
    :append-to-body="true"
    destroy-on-close
  >
    <div class="image-container">
      <img 
        v-if="imageUrl" 
        :src="imageUrl" 
        alt="Latest capture" 
        style="width: 100%;"
      >
      <div v-else class="no-image">暂无截屏</div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
        <el-button type="primary" @click="downloadImage">下载</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onUnmounted, watch } from 'vue'
import { Camera, Picture } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const props = defineProps({
  deviceId: {
    type: Number,
    required: true
  }
})

const capturing = ref(false)
const dialogVisible = ref(false)
const imageUrl = ref('')

// 截屏
const captureImage = async () => {
  capturing.value = true
  try {
    const response = await axios.post(`/api/camera/capture/${props.deviceId}`, null, {
      headers: {
        'Authorization': 'Bearer ra.5re72ai38g4y7gky9ghls5dzb2equqku-491d6ysuja-0bzlevz-5zrd54nns'
      }
    })
    if (response.status === 200) {
      ElMessage.success('截屏成功')
      // 立即显示新截屏
      showLatestImage()
    }
  } catch (error) {
    ElMessage.error('截屏失败: ' + error.message)
  } finally {
    capturing.value = false
  }
}

// 查看最新截屏
const showLatestImage = async () => {
  try {
    const response = await axios.get(`/api/camera/latest/${props.deviceId}`, {
      responseType: 'blob'
    })
    const blob = new Blob([response.data], { type: 'image/jpeg' })
    imageUrl.value = URL.createObjectURL(blob)
    dialogVisible.value = true
  } catch (error) {
    ElMessage.error('获取截屏失败: ' + error.message)
  }
}

// 下载图片
const downloadImage = () => {
  if (imageUrl.value) {
    const link = document.createElement('a')
    link.href = imageUrl.value
    link.download = `capture-${new Date().toISOString()}.jpg`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
}

// 关闭对话框的方法
const closeDialog = () => {
  dialogVisible.value = false
  handleDialogClose()
}

// 处理对话框关闭
const handleDialogClose = () => {
  // 清理图片URL，释放内存
  if (imageUrl.value) {
    URL.revokeObjectURL(imageUrl.value)
    imageUrl.value = ''
  }
}

// 监听dialogVisible的变化
watch(dialogVisible, (newVal) => {
  if (!newVal) {
    handleDialogClose()
  }
})

// 监听组件卸载时清理资源
onUnmounted(() => {
  if (imageUrl.value) {
    URL.revokeObjectURL(imageUrl.value)
  }
})
</script>

<style scoped>
.camera-control-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

.button-group {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  pointer-events: auto;
  z-index: 101;
}

.control-button {
  opacity: 0.9 !important;
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 8px 16px !important;
  transition: all 0.3s ease !important;
}

.control-button:hover {
  opacity: 1 !important;
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background-color: #2a2a2a;
  border-radius: 4px;
  overflow: hidden;
}

.no-image {
  color: #909399;
  font-size: 16px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 添加对话框相关样式 */
:deep(.el-dialog) {
  background-color: #1a1a1a;
  border-radius: 8px;
}

:deep(.el-dialog__title) {
  color: #ffffff;
}

:deep(.el-dialog__header) {
  border-bottom: 1px solid #333;
  padding: 15px 20px;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-dialog__footer) {
  border-top: 1px solid #333;
  padding: 15px 20px;
}

/* 添加图片加载动画 */
.image-container img {
  transition: opacity 0.3s ease;
}

.image-container img[src=""] {
  opacity: 0;
}

/* 确保对话框在最顶层 */
:deep(.el-dialog__wrapper) {
  z-index: 9999 !important;
}

:deep(.v-modal) {
  z-index: 9998 !important;
}
</style> 